
// function ButtonComponent(props) {
//     return (
//         <div>
//             <h1 id="c">{props.name}</h1>
//             <button> 点击 </button>
//         </div>
//     )
// }

class ButtonComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: props.name,
            color: "red"
        }
        this.changeText = this.changeText.bind(this)
    }

    changeText(e) {
        console.log(e)
        let name = "hello react"
        this.setState(state => ({
            name: name,
            color: "green"
        }));
    }

    render() {
        return (
            <div>
                <h1 id="c" style={{color: this.state.color, fontSize:"20px"}}>{this.state.name}</h1>
                <button onClick={this.changeText}> 点击 </button>
            </div>
        )
    }
}

let rootContainer = document.getElementById("root")
ReactDOM.render(
    <ButtonComponent name="hello world!"/>,
    rootContainer)